<style lang="less" scoped src="./classroom.less"></style>
<script src="./classroom.js"></script>
<template>
            <div>
                <div class="main-table" style="font-size: 15px;">
                    <Row align="middle">
                         <Col span="2">
                            教室名称:
                        </Col>
                        <Col span="4">
                            <Input  v-model="queryData.name" style="width: 98%"></Input>
                        </Col>
                    </Row>
                </div>
                <div style="display: flex;justify-content:space-between">
                     <div>
                    <span @click="showAdd"><Button type="primary" icon="plus">添加</Button></span>
                    <!--  <span @click="showAdd"><Button type="primary" icon="edit">修改</Button></span>
                      <span @click=""><Button type="primary" icon="close">删除</Button></span> -->
                </div>
                <div>
                    <span @click="doQuery"><Button type="primary" icon="android-search">查询</Button></span>
                     <span @click="queryData={};doQuery();"><Button type="primary" icon="refresh">重置</Button></span>
                </div>
                </div>
               
        <div class="main-table">
            <Table :columns="columns" :data="dataList" :highlight-row="true"
            @on-current-change="whenSelectRow"></Table>
        </div>
        <div class="pagination">
            <Page border :total="total" size="small" :page-size="pageSize" :current.sync="pageIndex" @on-change="init" show-total show-elevator></Page>
        </div>

         <Modal 
        v-model="addVisible"  
        :title="(formData.id ? '修改' : '新增') + '教室'" 
        width="60%" >
            <div class="modal-div">
                    <Row class="table-Row">
                    <Col span="4" class="titele"><span style="color: red" >*</span>教室名称：</Col>
                    <Col span="8" class="content">
                                 <Input v-model="formData.name"  :readonly="isRead" ></Input>
                    </Col>
                    <Col span="4" class="titele">所在楼名：</Col>
                    <Col span="8" class="content">
                              <Input v-model="formData.bulidName"  :readonly="isRead"></Input>
                    </Col>
                </Row>
                <Row class="table-Row">
                    <Col span="4" class="titele">座位数量：</Col>
                    <Col span="8" class="content">
                                    <Input v-model="formData.setAmount" ></Input>
                    </Col>
                    <Col span="4" class="titele"><span style="color: red">*</span>是否启用：</Col>
                    <Col span="8" class="content">
                             <Select v-model="formData.status">
                                     <Option :value="1">是</Option>
                                    <Option :value="2">否</Option>
                             </Select>
                    </Col>
                </Row>
                <Row class="table-Row">  
                    <Col span="4" class="titele">描述：</Col>
                    <Col span="20" class="content">
                                <Input type="textarea" :rows="2" v-model="formData.description" :clearable="!isRead" :readonly="isRead"></Input>
                    </Col>
                </Row>
            </div>
                    <div slot="footer">
                            <Button type="primary" @click="doSave">保存</Button>
                        <Button type="ghost" style="margin-left: 8px" @click="addVisible = false">取消</Button>
                    </div>
        </Modal>
    </div>
</template>

